<template>
  <view class="topic-item-container">
    <view class="item" :class="{ 'delete-item': showDelete || !canClick }" v-for="item in value" :key="item.id" @click.stop="handleClickItem(item)">
      <view class="text">{{ item.name }}</view>
      <text v-if="showDelete" class="delete" @click.stop="handleClickDelete(item)">✕</text>
    </view>
  </view>
</template>

<script>
/**
  {
    id: 1,
    text: '#美好生活,美丽中国'
  },
 */
export default {
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    showDelete: {
      type: Boolean,
      default: false
    },
    canClick: {
      type: Boolean,
      default: true
    },
    prePageUniqueID: {
      type: [String, Number],
      default: null
    },
    prePageTopicID: {
      type: [String, Number],
      default: '',
    },
    currentPageTopicID: {
      type: [String, Number],
      default: '',
    },
  },
  data: () => ({
  }),
  computed: {
  },
  methods: {
    handleClickItem(item) {
      const { currentPageTopicID, prePageTopicID, prePageUniqueID } = this; // 在动态、资讯详情页点击话题进入话题详情，在列出的相关话题动态、资讯中再次点击该item时应该直接返回上一层级
      console.log('handleClickItem', item, 'currentPageTopicID:' + currentPageTopicID, 'prePageTopicID:' + prePageTopicID, 'prePageUniqueID:' + prePageUniqueID);
      if (currentPageTopicID === item.id) return;
      if (prePageTopicID && prePageTopicID === item.id) {
        uni.navigateBack();
        return;
      }
      const { id } = item;
      let query = { id };
      const pageCount = getCurrentPages().length;
      if (prePageUniqueID && pageCount < 6) {
        query = { ...query, prePageUniqueID };
      }
      const params = {
        url: '/pages-home/topic-conversation/detail/index' + this.$u.queryParams(query)
      };
      if (pageCount >= 6) {
        uni.redirectTo(params);
      } else {
        uni.navigateTo(params);
      }
    },
    handleClickDelete(deleteTtem) {
      console.log('handleClickDelete', deleteTtem);
      let { value } = this;
      value = value.filter(item => item.id !== deleteTtem.id);
      this.$emit('input', value);
    }
  }
};
</script>

<style lang="less" scoped>
.topic-item-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .item {
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    padding: 12rpx 30rpx;
    background: #EFF5FF;
    border-radius: 28px;
    font-family: PingFangSC-Semibold;
    font-size: 24rpx;
    color: #3470FF;
    letter-spacing: 0;
    line-height: 32rpx;
    font-weight: 600;
    //
    display: flex;
    align-items: center;
    &:active {
      opacity: 0.8;
    }
    .text {
      white-space: nowrap;
      max-width: calc(100vw - 120rpx);
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .delete {
      pointer-events: initial;
      margin-left: 30rpx;
      font-weight: normal;
    }
  }
  .delete-item {
    pointer-events: none;
    .text {
      max-width: calc(100vw - 120rpx - 50rpx);
    }
  }
}
</style>
